<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合式继承</title>
</head>
<body>

<!-- 原型链继承 -->
<!--<script>

  function SuperType () {
    this.name = 'aaa'
    this.strs = ['a', 'b', 'c', 'd', 'e']
  }
  function SubType () {}

  SubType.prototype = new SuperType()

  const subInstance1 = new SubType()
  const subInstance2 = new SubType()

  subInstance1.name = 'a' // 会被添加到实例自身
  subInstance1.strs.push('f') // 因为实例自身没有
  // 属性的值是引用类型，引用类型的数据被共享，修改一个，其他也会被修改
  console.log(subInstance1)
  console.log(subInstance2) // ['a', 'b', 'c', 'd', 'e']

</script>-->

<!-- 构造函数式继承 -->
<!--<script>

  function SuperType () {
    this.colors = ['a', 'b', 'c', 'd', 'e']
  }
  SuperType.prototype.test = 'string'
  SuperType.prototype.sayColors = function () {
    console.log(this.colors)
  }

  function SubType () {
    SuperType.call(this)
  }

  const subInstance = new SubType()
  console.log(SubType.prototype, subInstance)
  subInstance.sayColors() // 报错，父类行的原型属性、方法对子类型不可见

</script>-->

<!-- 组合式继承 -->
<script>

  function SuperType (name) {
    this.name = name
    this.colors = ['red', 'orange', 'yellow', 'green']
  }
  SuperType.prototype.sayColors = function () {
    console.log(this.colors)
  }

  function SubType () {
    // 继承实例属性
    // 解决问题：实例属性是私有的
    SuperType.call(this, '懒羊羊')
  }

  // 继承原型属性
  // 解决问题：超类型方法对夫类型不可见
  SubType.prototype = new SuperType()
  SubType.prototype.constructor = SubType
  SubType.prototype.sayName = function () {
    console.log(this.name)
  }

  const subInstance = new SubType()
  const superInstance = new SuperType()
  console.log(superInstance)
  console.log(subInstance)
  superInstance.sayColors()
  subInstance.sayName()
  subInstance.sayColors()

</script>

</body>
</html>
